<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>优租云</title>
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0" />
    <link rel="stylesheet" href="./css/index.css"/>
    <script src="./js/jquery.js"></script>
    <script src="lib/layer/layer.js"></script>
    <script src="js/base.js"></script>
    <script src="lib/vue/vue.min.js"></script>
    <script src="lib/vue/vue-resource.min.js"></script>
    <link rel="stylesheet" href="./css/iconfont1.css"/>
</head>
<script type="text/javascript">
    (function () {
        var deviceWidth = document.documentElement.clientWidth;
        if (deviceWidth > 640) deviceWidth = 640;
        document.documentElement.style.fontSize = deviceWidth / 6.4 + 'px';

    }());
    $(document).ready(function(){
        $('#footer').load("./footer.html");
    })
</script>
<body>
<div id="app">
    <nav class="top" >
        <div class="topN">
            <div class="logo">
                <img src="./images/top-logo.png" alt=""/><span>优租云</span>
            </div>
            <ul class="nav">
                <a target="main" href="./home.html"><li >首页</li></a>
                <a target="main" href="./nestCloud.html"><li class="bottom_color">优租云</li></a>
                <a target="main" href="./information.html"><li>资讯</li></a>
                <a target="main" href="./aboutUs.html"><li>关于我们</li></a>
                <a target="main" href="./login.html" v-if="info == ''"><li>登录</li></a>
                <a target="main" href="./task_center.html" v-else><li><img :src="info.real_avatar" alt=""/><span class="name">{{info.name}}</span></li></a>
                <li @click="loginOut()">退出</li>
            </ul>
        </div>
    </nav>
    <div class="infor"><img src="./images/nest_banner_02.png" alt=""/></div>
    <div class="perCenter" style="width: 1200px!important;">
        <p class="crumbs"><span class="bottom_color">首页</span> > <span>优租云</span></p>
        <div>
            <div class="nestLeft">
                <div class="login_tit"  @click="addV()"><i class="icon iconfont">&#xe65d;</i>主页</div>
            <ul class="virtual">
                <li v-for="(li,index) in lists" @click="openV(li.id,li.image.image,index)" v-bind:class="{person:index==clickIndex}">
                <img class="icon" :src="li.image.image.real_cover" alt=""/>
                        <span class="fas" :id="'fin'+li.id">
                            <span>{{li.name}}</span>
                            <img class="edit" src="./images/nest_edit.png" @click="edit(li.id)" alt=""/>
                        </span>
                        <span style="display: none" :id="'edit' + li.id">
                            <input :value="li.name" :id="'name'+ li.id" type="search"/>
                            <button class="edit finish" @click="finish(li.id)">完成</button>
                        </span>
                </li>
            </ul>
        </div>
        <div class="nestRight">
            <div class="haveNo">
                <div class="add_vir" v-for="sty in system">
                    <p class="add_titV" style="padding: 10px;margin: 0 20px;border-bottom: 1px solid #69c4ae;"><img :src="sty.real_icon" alt=""/><b>{{sty.name}}</b></p>
                    <ul class="vir">
                        <li v-for="tt in sty.images" @click="establish(tt.image_id)">
                        <div class="Vtop" style="background-color: #fff">
                            <img :src="tt.real_cover" alt=""/>
                            <p>{{tt.name}}</p>
                        </div>
                        <div class="Vbottom">{{tt.name}} 系统</div>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="virtual_show" style="display: none">
                <img class="floatI" src="./images/floating.png" @click="float()" alt=""/>
                <iframe id="iframeS" :src="first.url" frameborder="0"></iframe>
                <div v-if="first" class="memory"><span style="margin-left: 50px">虚拟机配置中心 &#x3000;&#x3000; CPU: {{info.pre_vcpu}}HZ &#x3000;&#x3000; 内存：{{info.pre_ram}}G &#x3000;&#x3000; 硬盘：{{info.pre_disk}}</span>G <span class="close" @click="closeM()">×</span></div>
                <div class="operation" style="display: none">
                    <div class="tit">
                        <p>使用情况</p>
                        <span class="operation_close close" @click="operation_close()">×</span>
                    </div>
                    <div class="middle">
                        剩余U币： <span style="color: #dc562c">{{nest}}</span>个
                    </div>
                    <div class="bottom">
                        <ul>
                            <li @click="starting()"><img src="./images/start.png" alt=""/><p>开机</p></li>
                            <li @click="closeUp()"><img style="background-color: #0c63e7" src="./images/close.png" alt=""/><p>关机</p></li>
                            <li @click="deleteP()"><img style="background-color: #d44b28" src="./images/delete.png" alt=""/><p>删除</p></li>
                            <li id="btn" @click="FullScreen()"><img style="background-color: #10a57d" src="./images/fullScreen.png" alt=""/><p>全屏</p></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="popup" id="started" style="display: none">
        <div class="popup_vanish"></div>
        <div class="popupN" style="width: 340px;margin-left: -170px;top: 17%;">
            <p style="font-size: 16px">确定要开机吗？</p>
            <p style="margin-top: 30px">开机后将按照10分钟一枚U币计算</p>
            <div class="Whether">
                <button @click="startV()" style="background-color: #10a57d;color: #fff">确定</button>
                <button class="cancel" style="border: 1px solid #10a57d;background-color: #fff;margin-left: 60px">取消</button>
            </div>
        </div>
    </div>
    <div class="popup" id="shutdown" style="display: none">
        <div class="popup_vanish"></div>
        <div class="popupN" style="width: 340px;margin-left: -170px;top: 17%;">
            <p style="font-size: 16px">确定要关机吗？</p>
            <p style="margin-top: 30px">关机后将按照30分钟一枚U币计算</p>
            <div class="Whether">
                <button @click="shut()" style="background-color: #10a57d;color: #fff">确定</button>
                <button class="cancel" style="border: 1px solid #10a57d;background-color: #fff;margin-left: 60px">取消</button>
            </div>
        </div>
    </div>
    <div class="popup" id="insufficient" style="display: none">
        <div class="popup_vanish"></div>
        <div class="popupN" style="width: 340px;margin-left: -170px;top: 17%;">
            <p style="margin-top: 30px">当前可用U币不足，请前往任务系统完成任务获取U币!</p>
            <div class="Whether">
                <a href="./task_center.html"><button style="background-color: #10a57d;color: #fff">前往</button></a>
                <button class="cancel" style="border: 1px solid #10a57d;background-color: #fff;margin-left: 60px">取消</button>
            </div>
        </div>
    </div>
    <div class="popup" id="deleteVir" style="display: none">
        <div class="popup_vanish"></div>
        <div class="popupN" style="width: 340px;margin-left: -170px;top: 17%;">
            <p style="margin-top: 30px">虚拟机删除后不可恢复，请注意保存数据！</p>
            <div class="Whether">
                <button @click="deleted()" style="background-color: #10a57d;color: #fff">确定</button>
                <button class="cancel" style="border: 1px solid #10a57d;background-color: #fff;margin-left: 60px">取消</button>
            </div>
        </div>
    </div>
</div>
</div>

<div id="footer"></div>
</body>
<script>
    (function () {
        var app = new Vue({
            el: '#app',
            data: function () {
                return{
                    aurl: [],
                    lists:[],
                    cont:'',
                    system:[],
                    first:'',
                    info:'',
                    clickIndex:"-1",
                    nest:'',
                    id:''
                }
            },
            mounted: function () {
                var _this = this;
                this.showData();
                this.setTime()
                 setInterval(function(){
                    _this.setTime();
            }, 60000)
//需要执行的方法可以在mounted中进行触发，其获取的数据可以赋到data中后，可以放在前面进行渲染
            },
            methods: {
                showData: function () {
                    var _this = this;
                    get(url + 'user/info', {}).then(
                            function (res) {
                                if (res.body.code == 101) {
                                    tip(res.body.msg);
                                    location.href = './login.html'
                                } else if (res.body.code == 400) {
                                    tip(res.body.msg);
                                } else {
                                    _this.info = res.body.data
                                }
                            }, function (reason) {
                                tip('请求错误')
                            });
                    get(url + 'compute/instance', {}).then(
                            function (res) {
                                if (res.body.code == 101) {
                                    tip(res.body.msg);
                                    location.href = './login.html'
                                } else if (res.body.code == 400) {
                                    tip(res.body.msg);
                                } else {
                                    _this.lists = res.data.data.using
                                }
                            }, function (reason) {
                                tip('请求错误')
                            });
                    get(url + 'compute/image', {}).then(
                            function (res) {
                                if (res.body.code == 101) {
                                    tip(res.body.msg);
                                    location.href = './login.html'
                                } else if (res.body.code == 400) {
                                    tip(res.body.msg);
                                } else {
                                    _this.system = res.data.data
                                }
                            }, function (reason) {
                                tip('请求错误')
                            });
                },
                loginOut:function(){
                    logout();
                },
                addV:function(){
                    $('.haveNo').css('display','block')
                    $('.virtual_show').css('display','none')
                    $('.operation').css('display','none')
                    $('.virtual li').removeClass('person')
                },
                establish:function(id){
                    var _this = this;
                    post(url + 'compute/instance',{image_id:id}).then(
                            function (res) {
                                if (res.body.code == 101) {
                                    tip(res.body.msg);
                                    location.href = './login.html'
                                } else if (res.body.code == 400) {
                                    tip(res.body.msg);
                                } else {
                                    tip(res.body.msg);
                                    $('#addVirtual').css('display','none')
                                    _this.showData()
                                }
                            }, function (reason) {
                                tip('请求错误')
                            });
                },
                edit:function(id){
                    $('#edit'+id).css('display','')
                    $('#fin'+id).css('display','none')
                },
                finish:function(id){
                    var _this = this
                    var name =$('#name'+id).val()
                    post(url + 'compute/instance/rename',{name:name,instance_id:id}).then(
                            function (res) {
                                if (res.body.code == 101) {
                                    tip(res.body.msg);
                                    location.href = './login.html'
                                } else if (res.body.code == 400) {
                                    tip(res.body.msg);
                                } else {
                                    tip("修改成功");
                                    $('#edit'+id).css('display','none')
                                    $('#fin'+id).css('display','')
                                    _this.showData();
                                }
                            }, function (reason) {
                                tip('请求错误')
                            });
                },
                openV:function(id,image,index){
                    $('.haveNo').css('display','none');
                    $('.virtual_show').css('display','block');
                    let _this = this;
                    _this.clickIndex = index;
                    _this.id = id;
                    _this.info = image;
                    get(url + 'compute/instance/console?instance_id='+id, {}).then(
                            function (res) {
                                if (res.body.code == 101) {
                                    tip(res.body.msg);
                                    location.href = './login.html'
                                } else if (res.body.code == 400) {
                                    tip(res.body.msg);
                                } else {
                                    _this.first = res.data.data;
                                }
                            }, function (reason) {
                                tip('请求错误')
                            });
                },
                float:function(){
                    let _this = this;
                    $('.operation').css('display','block');
                    get(url + 'user/wallet', {}).then(
                            function (res) {
                                if (res.body.code == 101) {
                                    tip(res.body.msg);
                                    location.href = './login.html'
                                } else if (res.body.code == 400) {
                                    tip(res.body.msg);
                                } else {
                                    _this.nest = res.data.data.point;
                                }
                            }, function (reason) {
                                tip('请求错误');
                            });
                },
                starting:function(){
                    $('.operation').css('display','none');
                    $('#started').css('display','block');
                },
                startV:function(){
                    let _this = this;
                    post(url + 'compute/instance/on',{instance_id:_this.id}).then(
                            function (res) {
                                if (res.body.code == 101) {
                                    tip(res.body.msg);
                                    location.href = './login.html';
                                } else if (res.body.code == 400) {
                                    tip(res.body.msg);
                                } else {
                                    tip(res.body.msg);
                                    _this.showData();
                                    $('#started').css('display','none');
                                }
                            }, function (reason) {
                                tip('请求错误');
                            });
                },

                closeUp:function(){
                    $('.operation').css('display','none');
                    $('#shutdown').css('display','block');
                },
                shut:function(){
                    let _this = this;
                    post(url + 'compute/instance/off',{instance_id:_this.id}).then(
                            function (res) {
                                if (res.body.code == 101) {
                                    tip(res.body.msg);
                                    location.href = './login.html';
                                } else if (res.body.code == 400) {
                                    tip(res.body.msg);
                                } else {
                                    tip(res.body.msg);
                                    _this.showData();
                                    $('#shutdown').css('display','none');
                                }
                            }, function (reason) {
                                tip('请求错误');
                            });
                },
                deleteP:function(){
                    $('.operation').css('display','none');
                    $('#deleteVir').css('display','block');
                },
                deleted:function(){
                    let _this = this;
                    post(url + 'compute/instance/delete',{instance_id:_this.id}).then(
                            function (res) {
                                if (res.body.code == 101) {
                                    tip(res.body.msg);
                                    location.href = './login.html';
                                } else if (res.body.code == 400) {
                                    tip(res.body.msg);
                                } else {
                                    tip(res.body.msg);
                                    _this.showData();
                                    $('#deleteVir').css('display','none')
                                }
                            }, function (reason) {
                                tip('请求错误');
                            });
                },
                closeM:function(){
                    $('.memory').css('display','none');
                },
                operation_close:function(){
                    $('.operation').css('display','none');
                },
                setTime:function(){
                    let _this = this;
                    get(url + 'compute/instance/balance', {}).then(
                            function (res) {
                                if (res.body.code == 101) {
                                    tip(res.body.msg);
                                    location.href = './login.html'
                                } else if (res.body.code == 400) {
                                    tip('您的时间还剩余十分钟，请注意保存数据!');
                                    $('#insufficient').css('display','block');
                                } else if (res.body.code == 200){
                                    console.log('余额充足')
                                }
                            }, function (reason) {
                                tip('请求错误')
                            });
                },
                FullScreen:function(){
                    let _this = this;
                    var elem =document.getElementById("iframeS");
                    _this.requestFullScreen(elem);
                    $('.operation').css('display','none');
                },
                requestFullScreen:function(element) {
                    //某个元素有请求
                    var requestMethod =element.requestFullScreen
                            ||element.webkitRequestFullScreen //谷歌
                            ||element.mozRequestFullScreen  //火狐
                            ||element.msRequestFullScreen; //IE11
                    if (requestMethod) {
                        requestMethod.call(element);   //执行这个请求的方法
                    } else if (typeof window.ActiveXObject !== "undefined") {  //window.ActiveXObject判断是否支持ActiveX控件
                        //这里其实就是模拟了按下键盘的F11，使浏览器全屏
                        var wscript = new ActiveXObject("WScript.Shell"); //创建ActiveX
                        if (wscript !== null) {    //创建成功
                            wscript.SendKeys("{F11}");//触发f11
                        }
                    }
                }
            }
        })
    })();

    $('.popup_vanish').click(function(){
        $('.popup').css('display','none')
    });
    $('.cancel').click(function(){
        $('.popup').css('display','none')
    });
$('#footer').load('./footer.html')
</script>
</html>